<template>
    <div class="good">
      <div class="xinxi"  v-for="(item,index) in list" :key="index">
        <div class="imgbox">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="dian">
          <div class="title">{{item.name}}</div>
          <div class="psh">
            <span>{{item.wmPoiScore}}</span>
            <span>{{item.monthSalesTip}}</span>
          </div>
          <div class="song">
            <div class="qisong">
              <span>{{item.minPriceTip}}</span>
              <span>{{item.shippingFeeTip}}</span>
            </div>
            <div class="min">
              <span>{{item.deliveryTimeTip}}</span>
              <span>{{item.distance}}</span>
            </div>
          </div>
          <div class="pjia">
            <span></span>
          </div>
          <div class="jian">
            <span v-for="(item,index) in item.discounts2" :key="index">{{item.info}}</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import { shop_list, tuan_list, user_login } from '../../utils/api'
  export default {
    data(){
      return {
        // 用来保存当前点击的分类下标
        dainIndex:0,
        list:[]
      }
    },
    mounted(){
        shop_list().then((res)=>{
        console.log(res.data);
        this.list = res.data.list;
        })
    },
  }
  </script>
  
  <style lang='scss' scoped >
  
  /* 店铺信息 */
  .xinxi {
    box-sizing: border-box;
    display: flex;
    padding: 20px 10px;
    padding-bottom: 20px;
    
  }
  
  .xinxi .imgbox {
    height: 100px;
    margin-right: 10px;
  }
  
  .xinxi .imgbox img {
    height: 100%;
  }
  
  /* 店铺详细信息 */
  .xinxi .dian {
    display: flex;
    flex-direction: column;
  }
  
  /* 店铺名称 */
  .xinxi .dian .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  /* 月售 */
  .xinxi .dian .psh {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
  
  .xinxi .dian .psh span {
    display: inline-block;
    margin-right: 5px;
  }
  
  .xinxi .dian .psh span:nth-child(1) {
    color: red;
  }
  
  /* 配送 */
  .xinxi .dian .song {
    color: #999;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  
  .xinxi .dian .song .qisong {
    flex: 1;
    margin-right: 10px;
  }
  
  .xinxi .dian .song .qisong span:nth-child(3) {
    font-size: 6px;
    color: #999;
    text-decoration: line-through;
  }
  
  .xinxi .dian .song span {
    display: inline-block;
    margin-right: 2px;
  }
  
  /* 评价 */
  .xinxi .dian .pjia {
    font-size: 10px;
    color: orange;
    margin-bottom: 5px;
  }
  
  .xinxi .dian .pjia span {
    background-color: rgb(226, 210, 181);
    margin-right: 4px;
    border-radius: 4px;
  }
  
  /* 满减 */
  
  .xinxi .dian .jian {
    display: flex;
    font-size: 10px;
  }
  .xinxi .dian .jian span {
    font-size: 8px;
    margin: 6px 0;
    color: red;
    border: 1px solid red;
    display: inline-block;
    margin-right: 5px;
    border-radius: 4px;
  }
  
  /* 排序点击后样式的变化 */
  .bol {
    font-weight: bold;
  }
  </style>
  
  </style>